<template>
  <div
    class="w-full h-full mx-0 my-auto overflow-y-scroll text-white overflow-x-hidden px-2 text-xs"
  >
    <table class="w-full divide-y divide-myblue" :key="key">
      <thead>
        <tr>
          <th
            v-for="field in option.fields"
            :key="field.key"
            scope="col"
            class="
              px-6
              py-0.5
              text-left
              font-medium
              uppercase
              tracking-wider
              truncate
            "
          >
            {{ field.name }}
          </th>
        </tr>
      </thead>
      <tbody v-if="data">
        <tr v-for="(item, k) in data" :key="k">
          <td
            class="px-6 py-0.5 whitespace-nowrap"
            v-for="(key, i) in keys"
            :key="i"
          >
            <div>{{ item[key] || '-' }}</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- <pagination :total="data.total" @pageChanged="pageChangedHandler" /> -->
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  PropType,
  watch,
  onMounted,
  ref,
} from "vue";
import { useStore } from "../../store";

interface Field {
  name: string;
  key: string;
}

interface Action {
  key: string;
  name: string;
  class?: string;
}

interface TableOption {
  actions: Action[];
  fields: Field[];
}

export default defineComponent({
  emits: {
    rowClick: (payload: { item: any; action: any }) => {
      return true;
    },
  },
  props: {
    option: {
      type: Object as PropType<TableOption>,
      required: true,
    },
    data: {
      type: Object as PropType<{ [key: string]: any }[]>,
    },
    source: {
      type: String,
    },
  },
  setup(props) {
    const stats = ref();
    const store = useStore();
    const key = ref(0)

    const keys = computed(() => {
      return props.option.fields.map((f) => f.key);
    });

    const pageChangedHandler = (param: any) => {
      console.log("page changed", param);
    };

    watch(() => props.data, () => {
      console.log('data changed')
      key.value++
    })

    return {
      key,
      keys,
      pageChangedHandler,
    };
  },
});
</script>
<style scoped>
::-webkit-scrollbar {
  display: block !important;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3) !important;
}
::-webkit-scrollbar {
  width: 6px;
  /* background-color: #F5F5F5; */
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #01ccdf;
}
</style>
